<template>
  <el-dialog :visible.sync="dialogVisible" :title="'客户发票管理'" :close-on-click-modal="false" width="1200px" v-drag2anywhere>
    <div>
      <el-form :model="formData" ref="formData" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="订单号:">
              {{formData.ordercode}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单渠道:">
              {{formData.platform}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单总额:">
              {{parseFloat(formData.sum_order).toFixed(2)}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名:">
              {{formData.buyerinfo.buyer}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合作商:">
              {{formData.supname}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属账套:">
              {{formData.account}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务员:">
              {{formData.saleman}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="订单明细:">
              <div style="height: 150px;overflow-y:auto; padding: 1px;">
              <el-table :data="formData.goods" border height="100%">
                <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
                <el-table-column prop="title" label="商品名称"></el-table-column>
                <el-table-column prop="model" label="规格型号" width="100px"></el-table-column>
                <el-table-column prop="unit" label="单位" width="100px" align="center"></el-table-column>
                <el-table-column prop="count" label="数量" width="100px" align="center"></el-table-column>
                <el-table-column prop="price" label="单价" width="100px" align="center">
                  <template v-slot="scope">
                    {{scope.row.price|number(2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="total" label="小计" width="100px" align="center">
                  <template v-slot="scope">
                    {{scope.row.total|number(2)}}
                  </template>
                </el-table-column>
              </el-table>
              </div>
              <div style="text-align: right;padding: 2px 0px;border:1px solid #E3E3E3; border-top: none;">
                <span style="margin-right:15px">价税总额:{{formData.sum_order|number(2)}}</span>
              </div>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票附件:">
              <el-upload list-type="picture-card" ref="upload" :file-list="upconfig.imgList" :action="upconfig.action"
                :headers="upconfig.headers" :accept="upconfig.accept" :limit="upconfig.limit" :on-change="handleChange"
                :auto-upload="false" :on-remove="handleRemove" :on-exceed="handleLimit" multiple
                :on-preview="handlePreview">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户发票号码">
              <el-input type="textarea" :rows="6" placeholder="客户发票号或数电号码" v-model="formData.clientticket_fphm"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
     <Attachviewer v-if="attachVisible" ref="attachViewerUI"></Attachviewer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" @click="handleSave" size="medium">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import Attachviewer from '@/components/attachviewer.vue';
  import axios from 'axios';
  export default {
    components:{
      Attachviewer
    },
    data() {
      return {
        index: -1,
        ouid: '',
        formData: {
          ordercode: '',
          orderdate: '',
          buyerinfo:{
            buyer:''
          },
          clientticket_fphm:''
        },
        inputIdValue: '',
        ticket_platform_ids: [],
        inputTicketIdVisible: false,
        dialogVisible: true,
        attachVisible:false,

        //文件上传相关变量
        upconfig: {
          //文件上传相关参数
          accept: '.jpg,.jpeg,.png,.pdf,.docx,.doc',
          limit: 5,
          headers: {
            token: localStorage.getItem('token') != null ? localStorage.getItem('token') : ''
          },
          imgList: [],
          fileList: [],
          rids: [], //要删除的id
          action: "/upload/ticketin"
        },
      }
    },

    filters: {
      //保留2位小数点过滤器，不四五入
      number(value, n = 3) {
        //var toFixedNum=parseFloat(value).toFixed(n);
        var toFixedNum = parseFloat(value).toFixed(n);
        var realVal = toFixedNum.substring(0, toFixedNum.toString().length);
        return realVal;
      }
    },
    methods: {
      init: function(index, data) {
        this.index = index;
        this.formData = data;
        this.upconfig.imgList=data.clientticket_attach;

      },
      format2Number(value, len) {
        var f = parseFloat(value);
        var f = Math.round(value * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + len) {
          s += '0';
        }
        return s;
        return realVal;
      },

      /***********************文件上传区域开始****************/
      //文件数量超限提示
      handleLimit: function() {
        this.$message.warning("最多可上传" + this.upconfig.limit + "个文件");
      },
      handleChange: function(file, list) {
        //判断文件格式和数量
        var ext = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
        var extarr = ['jpg', 'jpeg', 'png','pdf'];
        var sizeok = file.size / 1024 / 1024 < 5;
        if (extarr.lastIndexOf(ext) == -1) {
          this.$message.error("上传文件格式必须为" + extarr.join(","));
          //删除刚上传的文件
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }
        if (!sizeok) {
          this.$message.error("上传文件大小最大不超过5M");
          this.upconfig.fileList.splice(this.upconfig.fileList.length - 1, 1);
          return;
        }
        this.upconfig.fileList = list;
      },
      // 文件列表移除文件时的钩子
      handleRemove: function(file, fileList) {
        if (file.id) { //如果存储 id即为已经上传好的图片
          this.upconfig.rids.push(file.id);
        }
        this.upconfig.fileList = fileList;
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
        this.attachVisible=true;
        this.$nextTick(()=>{
          this.$refs.attachViewerUI.dialogVisible=true;
          this.$refs.attachViewerUI.initData(this.upconfig.imgList);
        })
      },
      handleSave: function() {
          let fd = new FormData();
          fd.append("ouid", this.formData.ouid);
          fd.append("ordercode",this.formData.ordercode);
          //添加要删除的附件id
          fd.append("rids", this.upconfig.rids.join(","));
          fd.append("clientticket_fphm",this.formData.clientticket_fphm);
          let fid = 0;
          this.upconfig.fileList.forEach(file => {
            if (file.raw) {
              fd.append("file" + fid, file.raw);
              fid++;
            }
          });
          this.$axiosUploader.post("api/admin/order/update_client_ticket",fd).then(res=>{
            if(res.status==200 && res.data.code==0){
              this.formData.clientticket_attach=res.data.attachlist;
              this.upconfig.imgList=res.data.attachlist;
               this.$message.success({message:res.data.msg,duration:1500,showClose:true});
               this.dialogVisible=false;
               this.upconfig.fileList=[];
               this.$emit("closeHandler",this.index,this.formData);

            }else{
               this.$message.error({message:res.data.msg,duration:1500,showClose:true});
            }
          })
      },

    }
  }
</script>

<style scoped>
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 120px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .el-upload-list__item .el-icon-close-tip {
    display: none !important;
  }
</style>
